<template>
  <div id="publicDisk_container">
    <div style="width: 100%; height: 50px">
      <div class="searchDivRight" v-if="this.$store.getters.showuserGuid === 'b23b7e63b17147caae46e96939795466'">
        <el-button type="primary" v-preventReClick icon="el-icon-plus" @click="dialogHardVisible = true">新規</el-button>
        <el-button type="warning" v-preventReClick icon="el-icon-edit" @click="updataHard">修正</el-button>
        <el-button type="danger" v-preventReClick icon="el-icon-delete" @click="removeDisk">削除</el-button>
      </div>
    </div>
    <div>
      <el-table :data="tableData" stripe style="width: 100%" border :header-cell-style="{ background: '#f2f2f2', color: '#606266' }" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column type="index" label="番号" width="50" />
        <el-table-column label="ファイル名" width="320">
          <template #default="scope">
            <p style="color: blue" @click="openPdf(scope.row.ihdfGuid)">{{ scope.row.ihdfName }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="アップロード者" width="150" />
        <el-table-column prop="ihdfTime" label="アップロード時間" />
      </el-table>
    </div>
    <!-- PDF弹出窗 -->
    <el-dialog :close-on-click-modal="false" v-model="dialogVisible" title="ファイルプレビュー" :fullscreen="true">
      <div class="pdf" style="width: 100%">
        <!-- <pdf :src="pdfsrc" page="1"> </pdf> -->
        <iframe :src="pdfsrc" frameborder="0" width="100%" height="825px" border="0"></iframe>
      </div>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" v-model="dialogHardVisible" title="ファイルアップロード" width="40%">
      <my-add @add-comment="appendComment"></my-add>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" v-model="dialogHardEditVisible" title="ファイル名編集">
      <div class="pdf"><i class="iconfont icon-pdf"></i> <el-input v-model="ihdfNamebigan" class="block"></el-input><span>.pdf</span></div>
      <div style="width: 100%; height: 100px; text-align: center; line-height: 100px">
        <el-button type="primary" @click="submitEdit" v-preventReClick>保存</el-button>
      </div>
    </el-dialog>
    <!-- 分页部分 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchHard.indexPage"
      :page-size="searchHard.pageSize"
      layout="total, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import add from '../HardDiskDialog/add.vue'
export default {
  components: {
    // 新增局部组件
    'my-add': add
  },
  data() {
    return {
      pdfsrc: '',
      ihdfNamebigan: '',
      searchHard: {
        indexPage: 1,
        pageSize: 8,
        searchbean: {
          ihdGuid: '6c9f732a7b7542458445d3f6954e49fd',
          userGuid: ''
        }
      },
      tableData: [],
      multipleSelection: [],
      dialogVisible: false,
      dialogHardVisible: false,
      dialogHardEditVisible: false,
      removeHard: {
        ihdfDelGuids: []
      }
    }
  },
  created() {
    this.getHardData()
    window.sessionStorage.setItem('Disk', '6c9f732a7b7542458445d3f6954e49fd')
  },
  mounted() {},
  methods: {
    // 复选框选改变事件
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log(this.multipleSelection)
    },
    // 分页方法 pagesize发生改变
    handleSizeChange(newSize) {
      // console.log(newSize)
      this.searchHard.pageSize = newSize
      this.getHardData()
    },
    // 当前页
    handleCurrentChange(newPage) {
      console.log(newPage)
      this.searchHard.indexPage = newPage
      this.getHardData()
    },
    // 打开Pdf弹出框
    openPdf(src) {
      console.log(src)
      this.axios.post('/internetharddrivesfile/select/detail/down', { ihdfGuid: src }, { responseType: 'blob' }).then((res) => {
        console.log(res)
        this.pdfsrc = this.getObjectURL(res.data)
      })
      console.log(this.pdfsrc)
      this.dialogVisible = true
    },
    // 将返回的流数据转换为url
    getObjectURL(file) {
      let url = null
      if (window.URL.createObjectURL != undefined) {
        // basic
        url = window.URL.createObjectURL(new Blob([file], { type: 'application/pdf' }))
        console.log(url)
      } else if (window.webkitURL != undefined) {
        // webkit or chrome
        try {
          url = window.webkitURL.createObjectURL(file)
          console.log(url)
        } catch (error) {}
      } else if (window.URL != undefined) {
        // mozilla(firefox)
        try {
          url = window.URL.createObjectURL(file)
          console.log(url)
        } catch (error) {}
      }
      return url
    },
    // 获取页面表格数据
    getHardData() {
      console.log(this.searchHard)
      this.axios
        .post('/internetharddrivesfile/select/all', this.searchHard)
        .then((res) => {
          console.log(res)
          this.tableData = res.data.data.list
          this.total = res.data.data.total
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 打开编辑弹出框逻辑
    updataHard() {
      // 只能选中一条数据
      if (this.multipleSelection.length === 1) {
        this.ihdfNamebigan = this.multipleSelection[0].ihdfName.split('.')[0]
        this.dialogHardEditVisible = true
      } else {
        return this.$message({
          showClose: true,
          message: this.$getMsg('W0001'),
          type: 'warning'
        })
      }
    },
    // 编辑保存按钮
    submitEdit() {
      if (this.ihdfNamebigan === '') return this.$message.warning('ファイル名を入力してください！')
      this.axios.put('/internetharddrivesfile/update', { ihdfGuid: this.multipleSelection[0].ihdfGuid, ihdfName: this.ihdfNamebigan, ihdGuid: '6c9f732a7b7542458445d3f6954e49fd' }).then((res) => {
        console.log(res)
        if (res.data.success === 1) {
          this.getHardData()
          this.dialogHardEditVisible = false
        }
      })
    },
    // 删除按钮事件
    removeDisk() {
      this.removeHard.ihdfDelGuids = []
      this.multipleSelection.forEach((item) => {
        this.removeHard.ihdfDelGuids.push({ ihdfGuid: item.ihdfGuid, ihdfPath: item.ihdfPath })
      })
      if (this.multipleSelection.length === 0) {
        return this.$message({
          showClose: true,
          message: this.$getMsg('W0002'),
          type: 'warning'
        })
      }
      this.$confirm(this.$getMsg('I0004'), {
        cancelButtonText: 'キャンセル',
        confirmButtonText: '確認',
        type: 'warning'
      }).then(
        () => {
          this.axios
            .delete('/internetharddrivesfile/deletebatch', { data: this.removeHard })
            .then((res) => {
              this.$message.success(this.$getMsg('I0003'))
              this.getHardData()
              this.removeHard.ihdfDelGuids = []
            })
            .catch((error) => {
              console.log(error)
            })
        },
        (res) => {
          console.log(res)
        }
      )
    },
    appendComment() {
      this.getHardData()

      this.dialogHardVisible = false
    }
  }
}
</script>

<style scoped>
#publicDisk_container {
  position: relative;
  width: 100%;
  height: 100%;
}
.pdf {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.block {
  flex: 22;
}
.pdf span {
  flex: 1;
}
.pdf i {
  flex: 1;
  color: #f7675d;
  font-size: 25px;
}
:deep(.el-dialog.is-fullscreen) {
  height: 97% !important;
  --el-dialog-margin-top: 15px;
}
:deep(.el-dialog) {
  width: 50%;
}
#publicDisk_container .el-pagination {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
}
</style>
